<script setup lang='ts'>
  import { reactive } from 'vue';
  import { statisticsApi } from '@/api/controller';
  import { Toastloading } from '@/utils/public';
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    dialogFormVisible:false,
    disabled:true,
    title:'',
    list:[] as any[],
  })
  const openDialog = async(query:any = {})=> {
    const { id, week='' } = query
    action.title = `${week}-奖励列表`
    const loading = Toastloading()
    const res = await statisticsApi.getGiftstarRewardList({
      id
    })
    loading.close()
    const { data=[] } = res
    action.list = data
    action.dialogFormVisible = true
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="5vh"
    class="xm-dialog"
    v-model="action.dialogFormVisible"
    :close-on-click-modal="action.disabled"
    :show-close="action.disabled"
    :close-on-press-escape="action.disabled"
    width="80%"
    :title="action.title">
    <el-table
      class="xm-TableCenter"
      :data="action.list"
      height="460"
      border>
      <el-table-column width="100" prop="id" label="ID" />
      <el-table-column width="100" prop="giftstar_id" label="周星活动ID" />
      <el-table-column width="100" prop="rank" label="排名" />
      <el-table-column width="120" prop="score" label="榜单值" />
      <el-table-column width="200" show-overflow-tooltip prop="name" label="名称" />
      <el-table-column width="100" prop="data_type" label="排行榜">
        <template #default="scope">
          {{ ['','房间榜','主播榜','用户榜'][scope.row.data_type] || scope.row.data_type }}
        </template>
      </el-table-column>
      <el-table-column width="90" prop="data_id" label="用户ID/房间ID" />
      <el-table-column width="90" prop="uuid" label="用户uuid/房间uid" />
      <el-table-column min-width="200" prop="reward" label="奖励" />
    </el-table>
    </el-dialog>
  </div>
</template>